<template>
  <div class="user-comments">
    <el-card>
      <div slot="header" class="clearfix">
        <span>我的评论</span>
      </div>
      
      <div v-loading="loading">
        <div class="empty-block" v-if="commentsList.length === 0">
          <el-empty description="暂无评论记录，去浏览作品并发表您的见解吧！">
            <el-button type="primary" @click="$router.push('/')">浏览作品</el-button>
          </el-empty>
        </div>
        
        <div v-else class="comments-list">
          <el-card v-for="item in commentsList" :key="item.id" class="comment-card">
            <div class="comment-content">
              <p class="content">{{ item.content }}</p>
              <div class="photo-info" @click="viewPhotoDetail(item.photoId)">
                <div class="photo-preview">
                  <el-image :src="item.photoUrl" fit="cover">
                    <div slot="error" class="image-error">
                      <i class="el-icon-picture-outline"></i>
                    </div>
                  </el-image>
                </div>
                <div class="photo-title">
                  <span>评论了作品：</span>
                  <span class="title">{{ item.photoTitle }}</span>
                </div>
              </div>
            </div>
            <div class="comment-footer">
              <span class="time">{{ formatDate(item.createTime) }}</span>
              <div class="actions">
                <el-popconfirm
                  title="确定删除该评论吗？"
                  @confirm="deleteComment(item.id)"
                >
                  <el-button slot="reference" type="text" size="mini" icon="el-icon-delete">删除</el-button>
                </el-popconfirm>
              </div>
            </div>
          </el-card>
          
          <div class="pagination" v-if="total > 0">
            <el-pagination
              @current-change="handleCurrentChange"
              :current-page.sync="currentPage"
              :page-size="pageSize"
              layout="total, prev, pager, next"
              :total="total">
            </el-pagination>
          </div>
        </div>
      </div>
    </el-card>
  </div>
</template>

<script>
import { mapGetters } from 'vuex'

export default {
  name: 'UserComments',
  data() {
    return {
      commentsList: [],
      currentPage: 1,
      pageSize: 10,
      total: 0,
      loading: false
    }
  },
  computed: {
    ...mapGetters(['userId'])
  },
  created() {
    this.fetchUserComments()
  },
  methods: {
    async fetchUserComments() {
      this.loading = true
      try {
        const params = {
          page: this.currentPage,
          pageSize: this.pageSize,
          userId: this.userId
        }
        const res = await this.$http.get('/comment/user', { params })
        if (res.data.code === 1) {
          this.commentsList = res.data.data.records
          this.total = res.data.data.total
        } else {
          this.$message.error('获取评论列表失败')
        }
      } catch (error) {
        console.error('获取评论列表失败', error)
        this.$message.error('获取评论列表失败')
      } finally {
        this.loading = false
      }
    },
    handleCurrentChange(page) {
      this.currentPage = page
      this.fetchUserComments()
    },
    formatDate(dateString) {
      if (!dateString) return ''
      const date = new Date(dateString)
      const year = date.getFullYear()
      const month = (date.getMonth() + 1).toString().padStart(2, '0')
      const day = date.getDate().toString().padStart(2, '0')
      const hour = date.getHours().toString().padStart(2, '0')
      const minute = date.getMinutes().toString().padStart(2, '0')
      return `${year}-${month}-${day} ${hour}:${minute}`
    },
    viewPhotoDetail(id) {
      this.$router.push(`/detail/${id}`)
    },
    async deleteComment(id) {
      try {
        const res = await this.$http.delete(`/comment/${id}`)
        if (res.data.code === 1) {
          this.$message.success('删除评论成功')
          this.fetchUserComments()
        } else {
          this.$message.error(res.data.msg || '删除评论失败')
        }
      } catch (error) {
        console.error('删除评论失败', error)
        this.$message.error('删除评论失败')
      }
    }
  }
}
</script>

<style scoped>
.empty-block {
  margin: 40px 0;
}

.comments-list {
  margin-top: 20px;
}

.comment-card {
  margin-bottom: 15px;
}

.comment-content {
  margin-bottom: 15px;
}

.content {
  font-size: 16px;
  margin: 0 0 15px;
  line-height: 1.6;
}

.photo-info {
  display: flex;
  align-items: center;
  background-color: #f5f7fa;
  padding: 10px;
  border-radius: 4px;
  cursor: pointer;
  transition: background-color 0.3s;
}

.photo-info:hover {
  background-color: #e6e8eb;
}

.photo-preview {
  width: 60px;
  height: 60px;
  overflow: hidden;
  margin-right: 12px;
  border-radius: 4px;
}

.photo-preview .el-image {
  width: 100%;
  height: 100%;
}

.photo-title {
  flex: 1;
  font-size: 14px;
  color: #606266;
}

.title {
  color: #409EFF;
  margin-left: 5px;
}

.comment-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-top: 1px solid #EBEEF5;
  padding-top: 10px;
}

.time {
  color: #909399;
  font-size: 13px;
}

.image-error {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
  background: #f5f7fa;
  color: #909399;
  font-size: 20px;
}

.pagination {
  margin-top: 30px;
  text-align: right;
}
</style> 